<div>
    <div class="header">
        <div class="search">
            <div class="search-item">
                <div class="form-field my-form-field">
                    <span>所属项目</span>
                    <mat-select [(value)]="body.projectId" placeholder="所属项目" >
                      <mat-option *ngFor="let project of projectList" [value]="project.id">
                          {{ project.projectName }}
                      </mat-option>
                  </mat-select>
                </div>
                <div class="form-field my-form-field">
                    <span>图纸名称</span>
                    <input matInput type="text" placeholder="请输入关键字进行搜索" [(ngModel)]="body.name">
                </div>
            </div>
            <div class="search-btn">
                <button color="primary" mat-raised-button matSuffix (click)="searchClick()">
                    查询
                    <mat-icon>search</mat-icon>
                </button>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="inline-btn">
            <button mat-raised-button color="primary" (click)="onNewCanvas()">新建图形</button>
        </div>
        <div class="container">
            <div class="item" *ngFor="let d of data">
                <div class="project-desc">
                    <div class="project-desc-flex">
                        <div class="project-desc-flex_name">{{d.name}}</div>
                        <button mat-raised-button color="primary" matBadge="8" matBadgePosition="before"
                            matBadgeColor="accent">
                            {{d.description}}
                        </button>
                    </div>
                    <div class="project-desc_sn">图号：{{d.id}}</div>
                    <div class="project-desc-flex">
                        <div class="project-desc-flex_time">{{d.updateTime}}</div>
                        <div class="project-desc-flex_icon" (click)="goEditor('editor',d.id,d.projectId)">...</div>
                    </div>
                    <div class="delete-btn">
                        <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon" (click)="deletePoject(d)">
                            <mat-icon>delete</mat-icon>
                        </button>
                    </div>
                </div>
            </div>
            <div style="flex:1;text-align:center;" *ngIf="total===0">暂无数据</div>
        </div>
        <mat-paginator *ngIf="total>0" [length]="total" [pageSize]="body.size" [pageSizeOptions]="[4,8, 12, 16, 20]" (page)="onPageChange($event)"></mat-paginator>
    </div>
</div>
